<template>
    <f7-page class="my" no-navbar>
        <div class="profile" v-if="isLogin">
            <div class="top-banner">
                <img src="../../assets/images/test.jpg" alt="" class="cover">
                <div class="avatar">
                    <img src="../../assets/images/test.jpg" alt="">
                </div>
                <div class="userinfo">
                    <p class="username">张大大张大大张大大张大大张大大张大大张大大张大大张大大张大大张大大张大大张大大张大大张大大张大大张大大张大大张大大张大大张大大张大大</p>
                    <p>
                        <span>昵称：</span>一步一步往上爬
                    </p>
                    <p>
                        <span>简介：</span>努力北漂的女汉子
                    </p>
                </div>
                <f7-link icon-fa="cog" class="btn-setting" href="/setting/"></f7-link>
            </div>
            <div class="tab-nav">
                <f7-link tab-link="#myIndex" class="active">主页</f7-link>
                <f7-link tab-link="#myFavorite">收藏</f7-link>
                <f7-link tab-link="#myMessage">消息</f7-link>
            </div>
            <f7-tabs swipeable>
                <f7-tab id="myIndex" active>
                    <home></home>
                </f7-tab>
                <f7-tab id="myFavorite">
                    <favorite></favorite>
                </f7-tab>
                <f7-tab id="myMessage">
                    <message></message>
                </f7-tab>
            </f7-tabs>
        </div>
        <no-login v-if="!isLogin"></no-login>
        <main-toolbar v-if="isLogin"></main-toolbar>
    </f7-page>
</template>

<style lang="scss">
@import "../../assets/css/common.scss";
.my {
  .top-banner {
    position: relative;
    min-height: 75px;
    padding: 20px 15px;
    overflow: hidden;

    .cover {
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      width: 100%;
      min-height: 100%;
      z-index: -1;
    }

    .avatar {
      float: left;
      width: 95px;
      height: 80px;
      margin-right: 10px;
      overflow: hidden;
      border-radius: 5px;

      img {
        display: block;
        width: 100%;
        min-height: 100%;
      }
    }

    .userinfo {
      padding: 0 30px 0 110px;

      p {
        margin: 0 0 5px 0;
      }

      .username {
        @extend %ellipsis;
        font-size: 16px;
        margin-bottom: 10px;
      }
    }

    .btn-setting {
      position: absolute;
      top: 20px;
      right: 15px;
    }
  }

  .tab-nav {
    height: 50px;
    line-height: 50px;
    background: #fff;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;

    a {
      position: relative;
      float: left;
      width: 33.33%;
      height: 100%;
      text-align: center;

      &:before {
        display: none;
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: #007aff;
      }

      &.active {
        &:before {
          display: block;
        }
      }
    }
  }
}
</style>

<script>
import mainToolbar from "../components/mainToolbar.vue";
import home from "./home.vue";
import favorite from "./favorite.vue";
import message from "./message.vue";
import noLogin from "../noLogin.vue";
export default {
    data() {
        return {
            isLogin: false
        }
    },
    components: {
        mainToolbar,
        home,
        favorite,
        message,
        noLogin
    }
};
</script>
